<template>
  <div class="container">
    <div class="change">
      <router-view></router-view>
    </div>
    <div class="state">
      <!-- <div class="state" v-if="!$route.meta.hideTabbar"> -->
      <tabbar :total='total'></tabbar>
    </div>
  </div>
</template>

<script>
  import tabbar from './components/tabbar.vue'
  import {
    mapState,
    mapGetters
  } from 'vuex'
  export default {
    name: 'app',
    components: {
      tabbar
    },
    computed: {
      ...mapState(['onHomePage']),
      ...mapGetters('shopcart', {
        total: 'getTotalGoodsCount'
      })
    }
  }
</script>

<style>
  .container {
    width: 450px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }

  .change {
    height: 50rem;
    padding: 0;
    overflow-y: scroll;
  }

  .change::-webkit-scrollbar {
    display: none;
  }

  .state {
    height: 45px;
    position: sticky;
    bottom: 0;
  }
</style>
